<template>
  <view class="wrapper">
    <u-navbar
      :title="$t('user.Phone-Number')"
      :autoBack="false"
			@leftClick="gotoBack"
      bgColor="#F6F6F6"
      titleStyle="font-weight: 500; color: #000000;"
      :placeholder="true"
    ></u-navbar>
    <view class="encode-view">
      <image src='@/static/image/user/phone.png' class="photo"/>
      <view class="encode" v-if="phone">+86 {{phone}}</view>
      <view class="encode" v-else></view>
      <view class="content">
        {{$t('user.Phone-tips')}}
     </view>
    </view>
    <button class="Change" @click="handlePageTo">{{$t('user.Change-Number')}}</button>
  </view>
</template>

<script>
  export default {
    data(){
      return{
        phone:''
      }
    },
    methods:{
			gotoBack() {
				uni.redirectTo({
					url: '/pagesUser/setting/Setting'
				});
			},
      handlePageTo(){
        uni.navigateTo({
          url: "/pagesUser/setting/ChangeNumber",
        });
      }
    },
    onLoad(option){
      if(option.phone === 'null') {
        this.phone = ''
      } else {
        this.phone = option.phone
      }
    }
  }
</script>

<style lang="scss" scoped>
.wrapper{
  padding: 0upx 30upx;
  .encode-view{
    margin-top: 200upx;
    text-align: center;
    .photo{
      width: 300upx;
      height: 200upx;
    }
    .encode{
      margin-top: 98upx;
      font-size: 34upx;
      font-weight: bold;
      color: #000000;
      opacity: 0.8;
    }
    .content{
      padding: 0upx 30upx;
      margin-top: 42upx;
      font-size: 24upx;
      font-weight: 400;
      color: #878787;
    }
  }
  .Change{
    width: 100%;
    height: 90upx;
    background: #FFFFFF;
    border-radius: 20upx;
    font-size: 30upx;
    font-weight: 500;
    color: #61BDB2;
    margin-top: 100upx;
    text-align: center;
    line-height: 90upx;
    &::after {
      border: none;
    }
  }
}
</style>